<template>
	<!-- 设备组详情抽屉 -->
	<div class="system-iotDeviceGroup-detail">
		<el-drawer v-model="isShowDialog" size="80%" direction="ltr">
			<template #header>
				<h4>客户经理详情</h4>
			</template>
			<el-form ref="formRef" :model="formData" label-width="150px">
				<el-row>
					<el-col :span="12">
						<el-form-item label="经理账号：">{{ formData.account }}</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="经理名称：">{{ formData.nickName }}</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="邀请码：">{{ formData.id }}</el-form-item>
					</el-col>
          <el-col :span="12">
						<el-form-item label="经理状态：">{{dictionary[formData.status]  }}</el-form-item>
					</el-col>
          <el-col :span="12">
						<el-form-item label="已认证企业：">{{ formData.verifiedNum }}</el-form-item>
					</el-col>
          <el-col :span="12">
						<el-form-item label="未认证企业：">{{ formData.unVerifiedNum }}</el-form-item>
					</el-col>
          <el-col :span="12">
						<el-form-item label="企业累计充值金额：">{{ formData.totalRecharge }}</el-form-item>
					</el-col>
          
					
				</el-row>
			</el-form>
		</el-drawer>
	</div>
</template>
<script lang="ts">
  import { reactive, toRefs, defineComponent,ref,getCurrentInstance, } from 'vue';
  import {ElMessageBox, ElMessage, FormInstance,UploadProps} from 'element-plus';
  import dictionary from '@/utils/dictionary.json';
  import {getManagerApi  } from "@/api/customerManagerManage/customerManager";
  export default defineComponent({
    name:"customerManagerDetail",
    // props:{},
    setup(props,{emit}) {
      const {proxy} = <any>getCurrentInstance()
      const formRef = ref<HTMLElement | null>(null);
      const menuRef = ref();
      const state = reactive({
        loading:false,
        isShowDialog: false,
        formData: {
          id: undefined,
          account: undefined,
          remark: undefined,
          nickName: undefined,
          verifiedNum: undefined,
          unVerifiedNum: undefined,
          totalRecharge: undefined,
          status: undefined,
        },
        // 表单校验
        rules: {
        }
      });
        // 打开弹窗
        const openDialog = (row) => {
          resetForm();
          if(row) {
            getManagerApi({id:row.id}).then((res:any)=>{
              const data = res.data;
              state.formData = data;
            })
          }
          state.isShowDialog = true;
        };
        // 关闭弹窗
        const closeDialog = () => {
          state.isShowDialog = false;
        };
        // 取消
        const onCancel = () => {
          closeDialog();
        };
        const resetForm = ()=>{
          state.formData = {
           id: undefined,
          account: undefined,
          remark: undefined,
          nickName: undefined,
          verifiedNum: undefined,
          unVerifiedNum: undefined,
          totalRecharge: undefined,
          status: undefined,
          }
        };
        return {
          proxy,
          openDialog,
          closeDialog,
          onCancel,
          menuRef,dictionary,
          formRef,
          ...toRefs(state),
        };
      }
  })
</script>
<style scoped>
.system-iotDeviceGroup-detail :deep(.el-form-item--large .el-form-item__label) {
	font-weight: bolder;
}
.pic-block {
	margin-right: 8px;
}
.file-block {
	width: 100%;
	border: 1px solid var(--el-border-color);
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: var(--el-transition-duration-fast);
	margin-bottom: 5px;
	padding: 3px 6px;
}
.ml-2 {
	margin-right: 5px;
}
</style>
